<template>
  <div class="gallery">
    <div class="gallery-header">
      <h1>书法作品画廊</h1>
      <p class="gallery-subtitle">欣赏精选的书法艺术作品</p>
    </div>

    <div class="gallery-filter">
      <div class="search-box">
        <input 
          type="text" 
          placeholder="搜索作品或书法家..." 
          v-model="searchQuery"
        >
        <button class="search-button">搜索</button>
      </div>
      
      <div class="filter-options">
        <select v-model="selectedStyle">
          <option value="">所有书体</option>
          <option value="楷书">楷书</option>
          <option value="行书">行书</option>
          <option value="草书">草书</option>
          <option value="隶书">隶书</option>
          <option value="篆书">篆书</option>
        </select>
        
        <select v-model="selectedDynasty">
          <option value="">所有朝代</option>
          <option value="晋代">晋代</option>
          <option value="唐代">唐代</option>
          <option value="宋代">宋代</option>
          <option value="元代">元代</option>
          <option value="明代">明代</option>
          <option value="清代">清代</option>
          <option value="近现代">近现代</option>
        </select>
      </div>
    </div>

    <div class="gallery-grid">
      <div 
        class="gallery-item" 
        v-for="item in filteredGalleryItems" 
        :key="item.id"
        @click="openDetail(item)"
      >
        <div class="item-image">
          <img :src="item.image" :alt="item.title">
        </div>
        <div class="item-info">
          <h3>{{ item.title }}</h3>
          <p class="artist">{{ item.artist }}</p>
          <div class="item-meta">
            <span class="dynasty">{{ item.dynasty }}</span>
            <span class="style">{{ item.style }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 作品详情模态框 -->
    <div class="modal" v-if="showModal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <span class="close" @click="closeModal">&times;</span>
        <div class="modal-body" v-if="selectedItem">
          <div class="modal-image">
            <img :src="selectedItem.image" :alt="selectedItem.title">
          </div>
          <div class="modal-info">
            <h2>{{ selectedItem.title }}</h2>
            <p class="artist">{{ selectedItem.artist }}</p>
            <div class="modal-meta">
              <span class="dynasty">{{ selectedItem.dynasty }}</span>
              <span class="style">{{ selectedItem.style }}</span>
            </div>
            <p class="description">{{ selectedItem.description }}</p>
            <div class="modal-details">
              <p><strong>创作背景：</strong>{{ selectedItem.background }}</p>
              <p><strong>艺术特色：</strong>{{ selectedItem.features }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchQuery = ref('')
const selectedStyle = ref('')
const selectedDynasty = ref('')
const showModal = ref(false)
const selectedItem = ref(null)

const galleryItems = [
  {
    id: 1,
    title: '兰亭序',
    artist: '王羲之',
    dynasty: '东晋',
    style: '行书',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg',
    description: '被誉为"天下第一行书"，是王羲之在兰亭雅集时所作。',
    background: '东晋永和九年（353年），王羲之与谢安、孙绰等四十一位军政高官在山阴兰亭会聚，饮酒赋诗，王羲之为此诗集作序。',
    features: '笔法飘逸秀美，气韵生动，章法自然，体现了王羲之书法艺术的最高成就。'
  },
  {
    id: 2,
    title: '祭侄文稿',
    artist: '颜真卿',
    dynasty: '唐代',
    style: '行书',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg',
    description: '颜真卿为祭奠侄子颜季明所作，书法雄浑悲壮。',
    background: '安史之乱时，颜真卿的侄子颜季明在抵抗叛军时被害，颜真卿悲愤交加写下此文。',
    features: '笔法雄浑，情感真挚，线条粗细变化丰富，体现了颜体行书的独特风格。'
  },
  {
    id: 3,
    title: '黄州寒食诗帖',
    artist: '苏轼',
    dynasty: '宋代',
    style: '行书',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg',
    description: '苏轼被贬黄州时所作，书法自然流畅，情感真挚。',
    background: '苏轼被贬黄州第三年寒食节时所作，表达了对人生际遇的感慨。',
    features: '笔法自然，结构疏密有致，体现了文人书法的独特韵味。'
  },
  {
    id: 4,
    title: '自叙帖',
    artist: '怀素',
    dynasty: '唐代',
    style: '草书',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg',
    description: '怀素的代表作之一，笔法狂放不羁。',
    background: '怀素在长安与文人雅士交往时所作，记录了自己学习草书的经历。',
    features: '笔法狂放，线条流畅如行云流水，展现了草书的极致之美。'
  },
  {
    id: 5,
    title: '九成宫醴泉铭',
    artist: '欧阳询',
    dynasty: '唐代',
    style: '楷书',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg',
    description: '欧阳询的楷书代表作，被誉为"楷书极则"。',
    background: '唐贞观六年（632年），唐太宗在九成宫避暑时发现醴泉，命魏征撰文，欧阳询书丹。',
    features: '结构严谨，笔法精到，点画工整，体现了欧体楷书的独特风格。'
  },
  {
    id: 6,
    title: '曹全碑',
    artist: '佚名',
    dynasty: '汉代',
    style: '隶书',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg',
    description: '东汉隶书的代表作，字体秀美飘逸。',
    background: '东汉灵帝中平二年（185年）为纪念曹全而立，原石明代出土，现存西安碑林。',
    features: '字体秀美，笔画舒展，波磔分明，体现了汉隶的典型特征。'
  }
]

const filteredGalleryItems = computed(() => {
  return galleryItems.filter(item => {
    const matchesSearch = item.title.includes(searchQuery.value) || 
                          item.artist.includes(searchQuery.value)
    const matchesStyle = selectedStyle.value ? item.style === selectedStyle.value : true
    const matchesDynasty = selectedDynasty.value ? item.dynasty === selectedDynasty.value : true
    
    return matchesSearch && matchesStyle && matchesDynasty
  })
})

const openDetail = (item) => {
  selectedItem.value = item
  showModal.value = true
}

const closeModal = () => {
  showModal.value = false
  selectedItem.value = null
}
</script>

<style scoped>
.gallery {
  width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.gallery-header {
  text-align: center;
  margin-bottom: 2rem;
}

.gallery-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.gallery-subtitle {
  font-size: 1.2rem;
  color: #666;
}

.gallery-filter {
  margin-bottom: 2rem;
}

.search-box {
  display: flex;
  margin-bottom: 1rem;
}

.search-box input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
}

.search-button {
  background-color: #667eea;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.filter-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-options select {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background-color: white;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.gallery-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
  background: white;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.item-image {
  height: 200px;
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover .item-image img {
  transform: scale(1.05);
}

.item-info {
  padding: 1.5rem;
}

.item-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
  color: #333;
}

.artist {
  color: #667eea;
  font-weight: 500;
  margin: 0 0 1rem 0;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.item-meta span {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
}

.dynasty {
  background-color: #e3f2fd;
  color: #1976d2;
}

.style {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 10px;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}

.close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  z-index: 1001;
}

.close:hover {
  color: #667eea;
}

.modal-body {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
}

.modal-image {
  flex: 1;
  min-width: 300px;
  padding: 1rem;
}

.modal-image img {
  width: 100%;
  border-radius: 10px;
}

.modal-info {
  flex: 1;
  min-width: 300px;
  padding: 1rem;
}

.modal-info h2 {
  margin: 0 0 1rem 0;
  font-size: 2rem;
  color: #333;
}

.modal-info .artist {
  font-size: 1.2rem;
  margin: 0 0 1.5rem 0;
}

.modal-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.modal-meta span {
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #555;
}

.modal-details p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 768px) {
  .modal-body {
    flex-direction: column;
  }
  
  .modal-image,
  .modal-info {
    min-width: 100%;
  }
}
</style>